<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Test for Bug 1064843</title>
  <style id="style"></style>
  <script type="text/javascript" src="/tests/SimpleTest/SimpleTest.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/EventUtils.js"></script>
  <script type="text/javascript" src="/tests/SimpleTest/WindowSnapshot.js"></script>
  <script type="text/javascript" src="file_fullscreen-utils.js"></script>
  <style>
    html {
      overflow: hidden;
    }
    #placeholder {
      height: 1000vh;
    }
  </style>
</head>
<body>
<div id="fullscreen"></div>
<div id="placeholder"></div>
<script>

const gStyle = document.getElementById("style");
const gFullscreen = document.getElementById("fullscreen");

function is(a, b, msg) {
  opener.is(a, b, "[backdrop] " + msg);
}

function isnot(a, b, msg) {
  opener.isnot(a, b, "[backdrop] " + msg);
}

function ok(cond, msg) {
  opener.ok(cond, "[backdrop] " + msg);
}

function info(msg) {
  opener.info("[backdrop] " + msg);
}

function synthesizeMouseAtWindowCenter() {
  synthesizeMouseAtPoint(innerWidth / 2, innerHeight / 2, {});
}

const gFullscreenElementBackground = getComputedStyle(gFullscreen).background;

function begin() {
  info("The default background of window should be white");
  assertWindowPureColor(window, "white");
  addFullscreenChangeContinuation("enter", enterFullscreen);
  gFullscreen.requestFullscreen();
}

function setBackdropStyle(style) {
  gStyle.textContent = `#fullscreen::backdrop { ${style} }`;
}

function enterFullscreen() {
  is(getComputedStyle(gFullscreen).background, gFullscreenElementBackground,
     "Computed background of #fullscreen shouldn't be changed");

  info("The default background of backdrop for fullscreen is black");
  assertWindowPureColor(window, "black");

  setBackdropStyle("background: green");
  info("The background color of backdrop should be changed to green");
  assertWindowPureColor(window, "green");

  gFullscreen.style.background = "blue";
  info("The blue fullscreen element should cover the backdrop");
  assertWindowPureColor(window, "blue");

  gFullscreen.style.background = "";
  setBackdropStyle("display: none");
  info("The white body should be shown when the backdrop is hidden");
  assertWindowPureColor(window, "white");

  setBackdropStyle("");
  info("Content should return to black because we restore the backdrop");
  assertWindowPureColor(window, "black");

  gFullscreen.style.display = "none";
  info("The backdrop should disappear with the fullscreen element");
  assertWindowPureColor(window, "white");

  gFullscreen.style.display = "";
  setBackdropStyle("position: absolute");
  info("Changing position shouldn't immediately affect the view");
  assertWindowPureColor(window, "black");

  window.scroll(0, screen.height);
  info("Scrolled up the absolutely-positioned element");
  assertWindowPureColor(window, "white");

  addFullscreenChangeContinuation("exit", exitFullscreen);
  document.exitFullscreen();
}

function exitFullscreen() {
  opener.nextTest();
}
</script>
</body>
</html>
